<template>
    <view>
        <navView navTitle="请假管理" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
        <view class="container">
            <!-- 筛选条件 -->
            <view class="filter-box">
                <picker mode="date" @change="startDateChange">
                    <view class="date-picker">{{ startDate || '开始日期' }}</view>
                </picker>
                <text class="separator">至</text>
                <picker mode="date" @change="endDateChange">
                    <view class="date-picker">{{ endDate || '结束日期' }}</view>
                </picker>
            </view>
            <uni-data-select v-model="filterStatus" :localdata="statusOptions" placeholder="全部状态"></uni-data-select>
            <button class="query-btn" @tap="getLeaveList">查询</button>
            <!-- 请假列表 -->
            <view class="leave-list">
                <!-- 调整字段映射 -->
                <view class="list-item" v-for="(item, index) in leaveList" :key="index">
                    <view class="item-header">
                        <view class="user-info">
                            <image class="avatar" :src="item.create_staff.img" mode="aspectFit"></image>
                            <text class="user-name">{{ item.create_staff.name }}</text>
                        </view>
                        <text :class="['status-tag', getStatusClass(item.check_status)]">
                            {{ getStatusText(item.check_status) }}
                        </text>
                    </view>
                    <view class="item-detail">
                        <view class="detail-row">
                            <uni-icons type="calendar" size="18" color="#999"></uni-icons>
                            <text class="time">{{ item.start_time.split(' ')[0] }} 至 {{ item.end_time.split(' ')[0]
                                }}</text>
                        </view>
                        <view class="detail-row">
                            <uni-icons type="paperplane" size="18" color="#999"></uni-icons>
                            <text class="type">请假类型：{{ item.type }}</text>
                        </view>
                        <view class="detail-row">
                            <uni-icons type="chat" size="18" color="#999"></uni-icons>
                            <text class="reason">事由：{{ item.remarks || '无' }}</text>
                        </view>
                    </view>
                    <view class="item-footer">
                        <text class="submit-time">提交时间：{{ item.createtime }}</text>
                        <!-- 根据实际状态显示操作按钮 -->
                        <button v-if="step.flow_staff_ids == userinfo.id && item.check_status == 0 || item.check_status == 1" class="action-btn" @click="handleAction(item)">审核</button>
                        <!-- <button v-else-if="item.check_status === 1" class="action-btn"
                            @click="handleAction(item)">审核中</button>
                        <button v-else-if="item.check_status === 2" class="action-btn"
                            @click="handleAction(item)">已批准</button>
                        <button v-else-if="item.check_status === 3" class="action-btn"
                            @click="handleAction(item)">已拒绝</button>
                        <button v-else-if="item.check_status === 4" class="action-btn"
                            @click="handleAction(item)">已撤销</button>  -->
                    </view>
                </view>
                <!-- 加载状态 -->
                <view v-if="isLoading" class="loading-text">加载中...</view>
                <view v-if="isNoMore" class="no-more-text">已经到底啦~</view>
            </view>
        </view>
        <image @tap="$navTo('/subpkg/attendance/addleave')" class="addimg" src="https://hfd.bjlzkj.com/static/user/add.png" mode=""></image>
    </view>
</template>

<script>
export default {
    data() {
        return {
            filterStatus: '',
            filterDate: '',
            statusOptions: [
                { value: '', text: "全部状态" },
                { value: 0, text: "待审批" },
                { value: 2, text: "已批准" },
                { value: 3, text: "已拒绝" }
            ],
            leaveList: [],
            currentPage: 1,
            totalPages: 1,
            isLoading: false,
            isNoMore: false,
            step:{},
            userinfo:{},
            startDate: new Date().toISOString().slice(0, 8) + '01', // 当月1号,
            endDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
                .toISOString().split('T')[0],
        }
    },
    computed: {
        filteredLeaveList() {
            let list = this.leaveList
            if (this.filterStatus !== 0) {
                list = list.filter(item => item.check_status === this.filterStatus)
            }
            if (this.filterDate) {
                list = list.filter(item => item.start_date === this.filterDate)
            }
        }
    },
    onLoad() {
        this.getLeaveList()
        this.getsteplist();
    },
    onReachBottom() {
        if (!this.isLoading && !this.isNoMore) {
            this.currentPage++
            this.getLeaveList()
        }
    },
    methods: {
        async getLeaveList() {
            // 修改请求参数
            const params = {
                page: this.currentPage,
                start_date: this.startDate,
                end_date: this.endDate
            }
            this.isLoading = true
            try {
                const res = await this.$request('/addons/qingdong/attendance/get_leave', 'GET', {
                    page: this.currentPage,
                    start_date: this.startDate,
                    end_date: this.endDate,
                    type: this.filterStatus
                })
                
                // 调整数据结构映射
                this.leaveList = this.currentPage === 1 
                ? res.data.data  // 响应数据路径调整
                : [...this.leaveList, ...res.data.data]
                
                this.totalPages = res.data.last_page || 1
                this.isNoMore = this.currentPage >= this.totalPages
            } catch (err) {
                console.error('获取数据失败:', err)
                uni.showToast({ title: '加载失败', icon: 'none' })
            } finally {
                this.isLoading = false
            }
        },
        getStatusClass(status) {
            // 根据接口状态值调整
            return {
                0: 'pending',  // 待审批
                1: 'approved', // 已批准
                2: 'rejected'  // 已拒绝
            }[status]
        },
        getStatusText(status) {
            return {
                0: '待审批',
                1: '审核中',
                2: '审核通过',
                3: '审核未通过',
                4: '撤销',
            }[status]
        },
        startDateChange(e) {
            this.startDate = e.detail.value
            this.currentPage = 1
        },
        endDateChange(e) {
            this.endDate = e.detail.value
            this.currentPage = 1
        },
        async getsteplist() {
            try {
                const res = await this.$request('/addons/qingdong/staff/getsteplist', 'GET', { type: "leave" });
                this.step = res.data; // 直接存储整个data对象
                this.userinfo = uni.getStorageSync('userInfo')
            } catch (error) {
                console.error('获取消息失败:', error);
            }
        },
        handleAction(item) {
            uni.showModal({
                title: '操作确认',
                content: '确认通过该审核吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.$request('/addons/qingdong/examine_record/examine', 'POST', {
                            relation_type: 'leave',
                            relation_id: item.id,
                            content: "同意",
                            status: 1
                        }).then(res => {
                            if (res.code == 1) {
                                uni.showToast({ title: '审核成功', icon: 'success' });  // 新增失败提示
                                this.getLeaveList()
                            } else {
                                uni.showToast({ title: res.msg, icon: 'none' });
                            }
                        });
                    } else {
                        uni.showToast({ title: '已取消', icon: 'fail' });
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss">
.container {
    padding: 20rpx;
}

.query-btn {
    width: 100%;
    height: 72rpx;
    background: #008efe;
    border-radius: 8rpx;
    color: #fff;
    font-size: 28rpx;
    line-height: 72rpx;
    flex-shrink: 0;
    margin-top: 20rpx;

    &:active {
        opacity: 0.9;
    }
}

.date-picker {
    width: 240rpx; // 调整宽度适应按钮加入
}

.filter-box {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;
    align-items: center;
    justify-content: center; // 新增居中布局

    .separator {
        color: #666;
        font-size: 28rpx;
    }

    .date-picker {
        width: 200rpx; // 固定宽度
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        color: #666;
        font-size: 28rpx;
        
        // 添加日历图标
        &::before {
            content: '📅';
            margin-right: 8rpx;
        }
        
        // 添加hover效果
        &:active {
            background-color: #f8f8f8;
        }
    }
}

.leave-list {
    .list-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .user-name {
                font-size: 32rpx;
                color: #333;
                font-weight: 500;
            }

            .status-tag {
                font-size: 24rpx;
                padding: 8rpx 16rpx;
                border-radius: 8rpx;

                &.pending {
                    background: #e6f3ff;
                    color: #008efe;
                }

                &.approved {
                    background: #e8f5e9;
                    color: #4CAF50;
                }

                &.rejected {
                    background: #ffebee;
                    color: #F56C6C;
                }
            }
        }

        .item-detail {
            .detail-row {
                display: flex;
                align-items: center;
                gap: 12rpx;
                margin-bottom: 16rpx;
                font-size: 28rpx;
                color: #666;

                .time,
                .type {
                    color: #333;
                }
            }
        }

        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 24rpx;
            padding-top: 24rpx;
            border-top: 1rpx solid #eee;

            .submit-time {
                font-size: 24rpx;
                color: #999;
            }

            .action-btn {
                font-size: 28rpx;
                padding: 8rpx 24rpx;
                border-radius: 8rpx;

                &[type="default"] {
                    background: #f5f5f5;
                    color: #666;
                }
            }
        }
    }
    // 添加最小高度保证布局
    min-height: 300rpx;
    
    .user-info {
        // 修复头像显示
        .avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
    }
    
    .action-btn {
        // 修正按钮样式
        line-height: 1.5;
        &[type="default"] {
            background: #f5f5f5 !important;
        }
    }
}

.loading-text,
.no-more-text {
    text-align: center;
    padding: 30rpx;
    color: #999;
    font-size: 28rpx;
}
.addimg {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 120rpx;
    right: 40rpx;
}
</style>